import React,{Component} from 'react'

import {
    View,
    Text,
    Button,
    Alert,
    Dimensions,
    StyleSheet,
    ToastAndroid,
    FlatList,
    ScrollView
}from 'react-native'

const { width, height } = Dimensions.get('window');



const styles=StyleSheet.create({
    jiange:{
        width:'100%',
        borderTopWidth:1,
        borderColor:'rgba(150,150,150,0.2)',
        height:1
    },
    item:{
        width:width,
        backgroundColor:'white',
        paddingLeft:10,
        paddingRight:10,
        height:50,
        flexDirection:'row',
        justifyContent:'space-between',
        alignItems:'center'
    },
    left:{
        width:width/2,
        height:50,
        flexDirection:'row',
        justifyContent:"space-around",
        alignItems:'center'
    },
    right:{
        width:width/2,
        height:50,
        flexDirection:'row',
        justifyContent:"space-around",
        alignItems:'center'
    },

})

import Icon from 'react-native-vector-icons/FontAwesome';


export default class TuiCai extends Component{
    static navigationOptions={
        title:'退菜',
        headerTitleStyle: {
        alignSelf:'center'
      },
    };

    state={
        testdata:[
                {
                num:3,
                name:'麻辣蒜香豆腐',
                totalprice:6,
                price:2
                },
                {
                name:'西红柿鸡蛋盖饭',
                num:2,
                totalprice:4,
                price:2
                }
        ]
    } 

    decrease=function(index){
        if(--this.state.testdata[index].num==0){
            this.state.testdata.splice(index,1)
        }
        else
        this.state.testdata[index].totalprice-=this.state.testdata[index].price
        this.setState({
            testdata: this.state.testdata
        })
    }

    render(){
        return (
            <ScrollView>
                <FlatList
                    data={this.state.testdata}
                    keyExtractor={(item, index) => index}
                    ItemSeparatorComponent={()=>{
                        return(
                            <View style={styles.jiange}/>
                            )
                        }}
                    renderItem={
                        (item)=>{
                            return(
                                <View style={styles.item}>
                                    <View style={styles.left}>
                                    <Text>
                                    {item.item.name}
                                    </Text>
                                    </View>

                                    <View style={styles.right}>
                                    <Text
                                    style={{padding:5}}
                                    onPress={()=>{
                                        this.decrease(item.index)
                                    }}
                                    ><Icon name="minus" size={15} color="#4F8EF7" /></Text>
                                    <Text>{item.item.num}(份)</Text>
                                    <Text>{item.item.totalprice}</Text>
                                    </View>
                                </View>
                            )
                        }
                    }
                />
                <Button
                    onPress={()=>{
                        Alert.alert(
                            '确定退菜？',
                            null,
                            [
                            {text: '确定', onPress: () => console.log('Foo Pressed!')},
                            {text: '取消', onPress: () => console.log('Bar Pressed!')},
                            {text: '', onPress: () => console.log('Bar Pressed!')},
                            ]
                        )
                     }}
                    title="退菜"
                    style={{padding:20}}
                    color="#841584"
                />
            </ScrollView>
        )
    }
}